<template>
	<el-container direction="vertical">
		<SearchForm :columns="formColumn" @search="search" @reset="search" />
		<el-header>
			<div class="left-panel">
				<el-button icon="el-icon-download" @click="exported">导出</el-button>
			</div>
			<div class="right-panel"></div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				tableName="dataBuyClassComboList"
				v-bind="list"
				row-key="id"
				stripe
			>
				<el-table-column type="selection" width="50"></el-table-column>
				<!-- <el-table-column
					label="操作"
					width="140"
					fixed="right"
					align="center"
				>
					<template #default="scope">
						<el-button
							plain
							size="small"
							@click="handleDetail(scope.row)"
							>详情</el-button
						>
						<el-button
							type="primary"
							plain
							size="small"
							@click="handleVoucher(scope.row)"
							>凭证</el-button
						>
					</template>
				</el-table-column> -->
			</scTable>
		</el-main>

		<!-- 详情 -->
		<Detail
			v-if="drawer.show_detail"
			@close="drawer.show_detail = false"
			@success="search"
		/>
		<!-- 凭证 -->
		<Voucher
			v-if="drawer.show_voucher"
			@close="drawer.show_voucher = false"
			@success="search"
		/>
	</el-container>
</template>

<script>
import SearchForm from "@/components/SearchForm/index.vue";
import Detail from "./components/detail/index.vue";
import Voucher from "./components/voucher/index.vue";

import { formColumn, column } from "./data";
import { ElMessage } from 'element-plus'

export default {
	components: {
		SearchForm,
		Detail,
		Voucher,
	},
	data() {
		return {
			formColumn,
			list: {
				apiObj: this.$API.business.list,
				params: {
					type: 20
				},
				column,
			},
			drawer: {
				show_detail: false,
				show_voucher: false,
			},
		};
	},
	methods: {
		// 批量导出
		exported() {
			const tableSelection = this.$refs.table.tableSelection;
			const isOk = tableSelection.length > 0 ? true : false
			if (isOk) {
				console.log("导出");
			}
			ElMessage({
				message: isOk ? "导出成功" : "请选择学员",
				type: isOk ? "success" : "warning"
			})
		},
		search(searchParams) {
			let params = {}
			if(searchParams) {
				const searchObj = JSON.parse(JSON.stringify(searchParams))
				if(searchObj.transactionTime) {
					searchObj.transactionTimeEnd = searchObj.transactionTime[1]
					searchObj.transactionTimeStart = searchObj.transactionTime[0]
					delete(searchObj.transactionTime)
				}else{
					delete(searchObj.transactionTime)
				}
				params = Object.assign({}, searchObj, this.list.params)
			}else{
				params = Object.assign({}, this.list.params, {});
			}
			this.$refs.table.reload(params);
		},
		handleDetail(row) {
			this.drawer.show_detail = true;
		},
		handleVoucher(row) {
			this.drawer.show_voucher = true;
		},
	},
};
</script>

<style></style>
